<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
    <div class="user">
        <basic-container>
            <avue-crud
                    v-model="form"
                    v-model:page="page"
                    v-model:search="searchForm"
                    :permission="getPermission"
                    v-bind="bindVal"
                    v-on="onEvent"
                    :option="option"
                    :data="tableData"
                    :before-open="beforeOpen"

            >
                <template #menu="scope">
                    <el-button link type="primary"  icon="el-icon-edit" @click="openSearch(scope.row, scope.index)">配置</el-button>
                    <el-button link type="primary"  icon="el-icon-edit" @click="createTestData(scope.row, scope.index)">生成测试数据</el-button>
                    <el-button link type="primary"  icon="el-icon-edit" @click="preview(scope.row, scope.index)">预览</el-button>
                </template>
            </avue-crud>
        </basic-container>
    </div>

    <el-dialog  v-model="tableSearchVisible" v-if="tableSearchVisible" title="查询配置" width="94%"  height="80%" lock-scroll>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础设置" name="first">
                <avue-crud
                        ref="itemCrud"
                        :data="tableItemData"
                        :option="tableItemOption"
                        @row-update="handleItemUpdate"
                        @row-save="handleItemSave"
                />
            </el-tab-pane>

            <el-tab-pane label="事件设置" name="second">

                <avue-crud
                        v-model="eventForm"
                        :permission="getPermission"
                        :option="eventOption"
                        :data="eventTableData"
                            @row-save="handleEventSave"
                            @row-update="handleEventUpdate"
                            @row-del="handleEventDel"
                >
                </avue-crud>

            </el-tab-pane>
            <el-tab-pane label="数据权限设置" name="third">
                <avue-crud
                        v-model="rightsForm"
                        :option="rightsOption"
                        :data="rightsTableData"
                        @row-save="handleRigthsSave"
                        @row-update="handleRigthsUpdate"
                        @row-del="handleRigthsDel"
                >
                </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="插件设置" name="fourth">待处理</el-tab-pane>

            <el-tab-pane label="接口测试" name="five">

              <div style="min-height:400px ">
                <el-row >
                  <el-col :span="3">接口地址-分页:</el-col>
                  <el-col :span="9">{{apiConfig.urlPage}}</el-col>
                  <el-col :span="3">接口地址-列表:</el-col>
                  <el-col :span="9">{{apiConfig.urlList}}</el-col>
                </el-row>
                <el-row :span="24">
                  <el-col :span="3">接口地址-导出:</el-col>
                  <el-col :span="9">{{apiConfig.urlExport}}</el-col>
                </el-row>
                <el-row :span="24">
                  <el-col :span="3">调用方法:</el-col>
                  <el-col :span="9">{{apiConfig.month}}</el-col>
                </el-row>

                <el-row :span="24">
                  <el-col :span="3">参数:</el-col>
                  <el-col :span="9">
                    <el-table :data="callParams" border style="width: 100%">
                      <el-table-column prop="name"   label="参数名称" width="180"></el-table-column>
                      <el-table-column prop="query"   label="擦" width="180"></el-table-column>
                      <el-table-column prop="date"   label="日期" width="180"></el-table-column>

                    </el-table>
                  </el-col>
                </el-row>

                <el-row :span="24">
                  <el-col :span="3">结果:</el-col>
                  <el-col :span="9">{{apiConfig.month}}</el-col>
                </el-row>
              </div>

          </el-tab-pane>
        </el-tabs>

<!--        <div class="pull-auto">-->
<!--           -->


<!--        </div>-->
    </el-dialog>

</template>

<script>
    import curdMixin from '@/framework-core/mixins/crud';
    import {tableOption} from "./formQueryApp";
    import {listCore,saveCore,delCore } from "@/framework-core/api/core/api";
    import {fqmtableOption} from "../../code/generator/formQueryModel";
    import {queryApp,createTestDataByApp} from "@/framework-admin/api/code/formquery";
    import {dicCommParent} from "@/framework-admin/api/admin/dic";
    import website from '@/framework-core/config/website';
    export default {
        name: "form_query_app",
        mixins: [curdMixin],
        data() {
            return {
                activeName:"first",
                appId:'',
                tableSearchVisible:false,
                tableItemOption: fqmtableOption,
                tableItemData: [],
                pageConfig:{"url":"/form/queryApp"},
                searchForm: {},
                loading: false,
                form:{},
                pdic:[],
                apiConfig:{
                  urlPage: website.baseUrl+'/api/form/tableData/page',
                  urlList: website.baseUrl+'/api/form/tableData/list',
                  urlExport:website.baseUrl+ '/api/form/tableData/export',
                  month:"post",
                  params:[]
                },
                option: tableOption,
                callParams:[],
                imgdatas:[],
                eventTableData:[],
                eventOption: {
                    "border": true,
                    "index": true,
                    "indexLabel": "#",
                    "stripe": true,
                    "menuAlign": "center",
                    "align": "center",
                    grid: window.isMobile,
                    gridSpan: 24,
                    "searchMenuSpan": 6,
                    column: [

                        {
                            "type": "select",
                            "label": "按钮类型",
                            "prop": "btnType",
                            dicData:[
                                {"label":"表头","value":1},
                                {"label":"行内","value":2},
                                {"label":"表单","value":3},
                                {"label":"新增","value":4},
                                {"label":"修改","value":5},
                                {"label":"删除","value":6},
                                {"label":"新增导入","value":7},
                                {"label":"修改导入","value":8},
                                {"label":"导出","value":9},
                                {"label":"预览","value":10}
                            ],
                            "rules": [{
                                required: true,
                                message: '按钮类型不能为空',
                                trigger: 'blur'
                            }],
                            control: (val, form) => {
                               switch (val) {
                                   case 1:
                                       break;
                                   case 2:
                                       break;
                                   case 3:
                                       break;
                                   case 4:
                                       form.name = "新增";
                                       form.prop = "add";
                                       if(!form.btnSort){
                                           form.btnSort = 1;
                                       }
                                       return {
                                           onClick: {
                                               display: false
                                           },
                                           contentClick: {
                                               display: false
                                           },
                                           width: {
                                               display: false
                                           },
                                           height: {
                                               display: false
                                           }
                                       }
                                       break;
                                   case 5:
                                       form.name = "修改";
                                       form.prop = "edit";
                                       if(!form.btnSort){
                                           form.btnSort = 1;
                                       }

                                       break;
                                   case 6:
                                       form.name = "删除";
                                       form.prop = "delete";

                                       if(!form.btnSort){
                                           form.btnSort = 2;
                                       }

                                       break;
                                   case 7:
                                       form.name = "新增导入";
                                       form.prop = "importAdd";


                                       if(!form.btnSort){
                                           form.btnSort = 2;
                                       }

                                       break;
                                   case 8:
                                       form.name = "修改导入";
                                       form.prop = "importEidt";


                                       if(!form.btnSort){
                                           form.btnSort = 3;
                                       }
                                       break;
                                   case 9:
                                       form.name = "导出";
                                       form.prop = "export";

                                       if(!form.btnSort){
                                           form.btnSort = 4;
                                       }

                                       break;
                                   case 10:
                                       form.name = "预览";
                                       form.prop = "preview";

                                       if(!form.btnSort){
                                           form.btnSort = 4;
                                       }

                                       break;
                               }
                               if(val>=4 ){
                                   return {
                                       onClick: {
                                           display: false
                                       },
                                       contentClick: {
                                           display: false
                                       },
                                       width: {
                                           display: false
                                       },
                                       height: {
                                           display: false
                                       }
                                   }
                               }else{
                                   return {
                                       onClick: {
                                           display: true
                                       },
                                       contentClick: {
                                           display: true
                                       },
                                       width: {
                                           display: false
                                       },
                                       height: {
                                           display: false
                                       }
                                   }
                               }
                            }
                        },
                        {
                            "type": "input",
                            "label": "按钮名称",
                            "prop": "name",
                            "rules": [{
                                required: true,
                                message: '名称不能为空',
                                trigger: 'blur'
                            }],
                        },
                        {
                            "type": "input",
                            "label": "按钮标识",
                            "prop": "prop",
                            "rules": [{
                                required: true,
                                message: '按钮标识不能为空',
                                trigger: 'blur'
                            }],
                        },
                        {
                            "type": "number",
                            "label": "按钮排序",
                            "prop": "btnSort"
                        },

                        {
                            "type": "input",
                            "label": "样式",
                            "prop": "buttonStyleType",
                        },
                        {
                            "type": "input",
                            "label": "icon",
                            "prop": "icon",
                        },
                        {
                            "type": "select",
                            "label": "click事件",
                            "prop": "onClick",
                             hide:true,
                            dicData:[
                                {"label":"新开窗口","value":1},
                                {"label":"本窗口","value":2},
                                {"label":"弹出框","value":3},
                                {"label":"JS","value":4},
                                {"label":"接口","value":5},
                            ],
                            control: (val, form) => {
                                if(val==3 ){
                                    return {
                                        width: {
                                            display: true
                                        },
                                        height: {
                                            display: true
                                        }
                                    }
                                }else{
                                    return {
                                        width: {
                                            display: false
                                        },
                                        height: {
                                            display: false
                                        }
                                    }
                                }
                            }
                        },
                        {
                            "type": "textarea",
                            "label": "内容",
                            hide:true,
                            "prop": "contentClick"
                        },
                        {
                            "type": "input",
                            "label": "弹框宽度",
                            hide:true,
                            display: false,
                            "prop": "width"
                        },
                        {
                            "type": "input",
                            "label": "弹框高度",
                            hide: true,
                            display: false,
                            "prop": "height"
                        },
                      {
                        type: 'roleTreeChoose',
                        component: 'roleTreeChoose',
                        prop: 'roleTag',
                        display: true,
                        disabled: false,
                        label: '选择角色',
                        hide:true,
                        multiple:true,
                        span: 24,
                      }

                    ]
                },
                eventForm:{},
                rightsForm:{},
                rightsOption: {
                  "border": true,
                  "index": true,
                  "indexLabel": "#",
                  "stripe": true,
                  "menuAlign": "center",
                  "align": "center",
                  grid: window.isMobile,
                  gridSpan: 24,
                  "searchMenuSpan": 6,
                  column: [
                    {
                      type: 'roleTreeChoose',
                      component: 'roleTreeChoose',
                      prop: 'linkRoleId',
                      display: true,
                      disabled: false,
                      label: '选择角色',
                      hide: true,
                      multiple: false,
                      span: 24,
                    },
                    {
                      type: 'input',
                      prop: 'linkRoleName',
                      display: false,
                      disabled: false,
                      label: '角色',
                      hide: false,
                      span: 24,

                    },

                    {
                      "type": "select",
                      "label": "机构字段",
                      "prop": "linkDepType",
                      dicData: [
                        {"label": "ID", "value": "id"},
                        {"label": "编码", "value": "code"},
                        {"label": "名称", "value": "name"}
                      ],

                    },
                    {
                      "type": "select",
                      "label": "机构",
                      "prop": "linkDep",
                      filterable: true,
                      multiple: true,
                    },
                    {
                      "type": "select",
                      "label": "用户字段",
                      "prop": "linkUserType",
                      dicData: [
                        {"label": "ID", "value": "id"},
                        {"label": "登录名", "value": "loginname"},
                        {"label": "手机号", "value": "phone"},
                        {"label": "姓名", "value": "name"},
                      ],

                    },
                    {
                      "type": "select",
                      "label": "用户字段",
                      "prop": "linkUser",
                      filterable: true,
                      multiple: true,
                    },
                    {
                      "type": "select",
                      "label": "租户字段",
                      "prop": "tenantId",
                      filterable: true,
                    }
                  ]
                },
                rightsTableData:[],

            };
        },
        computed: {
            ...mapState({
                permissions: (state) =>state.user.permission,
            })

        },
        created() {
            if(this.$route.query.app){
                this.searchForm.app =this.$route.query.app;
            }
            this.getDataSourceList();
            this.getDicComm();
            this.init();
        },
        methods: {
            init() {
            },

            getDataSourceList() {
              let $that = this;
                listCore("sys/datasource",{}).then(response => {

                    if ( response.data.data && response.data.data.data.length > 0) {
                      //tableOption.column[2].dicData = [];
                      let dataSourceList = response.data.data.data;
                      let $Ele1 = $that.findObject(tableOption.column, 'db');
                      $Ele1.dicData = [];
                      let dbList = [];
                      dataSourceList.forEach(function (element) {
                        dbList.push({"label": element.title, "value": element.name})
                      });
                      $that.$nextTick(() => {
                        tableOption.column[2].dicData =dbList;
                       // alert(111)
                      })


                      //  $that.$forceUpdate();

                    } else {
                        //  this.$message.error("数据源信息列表为空,请添加数据源");
                    }
                });
            },
            getDicComm() {
                var $that = this;
                dicCommParent().then(response => {
                    var datas = response.data.data.data;
                    if (datas.length > 0) {
                        // $that.pdic = [];
                        // datas.forEach(function(element) {
                        //     $that.pdic.push({"label":element.label,"value":element.code})
                        // });
                        var $Ele1 = $that.findObject($that.tableItemOption.column, 'dicValue');
                        $Ele1.dicData =datas;
                    }
                });
            },
            getPermission: function (key, row, index) {
                //return this.getCommPermission(key, row, index);
                return true;
            },
            openSearch: function(row) {
                this.appId = row.id;
                this.tableItemData = [];
                this.eventTableData = [];
                this.rightsTableData = [];
                this.getDictItemList(row.app);
            },
            getCallParams:function () {
              this.callParams = [];
              if(!this.tableItemData){
                return;
              }
              for (let mindex = 0 ;mindex<this.tableItemData.length;mindex++){
                let tdata = this.tableItemData[mindex];
                if(tdata.queryType){
                  let param ={};
                  param.name = tdata.prop;
                  param.query = tdata.queryType;
                  param.type = tdata.type;
                  this.callParams.push(param);
                }
              }
            },
            createTestData: function(row) {
                createTestDataByApp(row.app,20).then(() => {
                    this.$message.success("成功");
                    done();
                });
            },

            preview:function(row) {
                let routerJump = this.$router.resolve({path: "/query/preview?app="+ row.app,query: {app:  row.app}});
                window.open(routerJump.href, '_blank');
            },
            handleItemUpdate (form, index, done, loading) {
                if(form.groupType && Array.isArray(form.groupType)){
                    form.groupType= form.groupType.join();
                }
                if(form.tag && Array.isArray(form.tag)){
                    form.tag= form.tag.join();
                }
                if(form.dicValue){
                    form.dicType =1
                }
                saveCore("/form/formQueryModel",form).then(() => {
                    this.$message.success("成功");
                    done();
                });
            },

            handleItemSave (form, done, loading) {
                if (form.groupType && Array.isArray(form.groupType)) {
                    form.groupType = form.groupType.join();
                }
                if (form.tag && Array.isArray(form.tag)) {
                    form.tag = form.tag.join();
                }
                if (form.dicValue) {
                    form.dicType = 1
                }
                saveCore("/form/formQueryModel", form).then(() => {
                    this.$message.success("成功");
                    done();
                });
            },



            getFormEvents(){
                var obj ={};
                obj.entity = {};
                obj.entity.appId = this.appId;
                listCore("/form/formQueryOperate",obj).then(response => {
                   if(!response.data.data){
                     this.eventTableData = [];
                   }else{
                     this.eventTableData = response.data.data.data;
                   }

                });
            },

            handleEventSave (form, done, loading) {
                form.appId =  this.appId;
                saveCore("/form/formQueryOperate",form).then(() => {
                    this.$message.success("成功");
                    this.getFormEvents();
                    done();
                });
                // if(!form.id){
                //     form.id = getUuid();
                // }
                // this.eventTableData.push(form);
                // done();
            },

            handleEventUpdate (form, index, done, loading) {
                saveCore("/form/formQueryOperate",form).then(() => {
                    this.$message.success("成功");
                    this.getFormEvents();
                    done();
                });
            },

            handleEventDel (form, index, done, loading) {

                this.$confirm("是否确认删除：" +form.name, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(function() {
                        return delCore("/form/formQueryOperate",form);
                    })
                    .then(() => {
                        this.getFormEvents();
                        this.$message.success("删除成功");
                    });
            },

            getFormRigths() {
              let dicDadas = [];
              for (let index=0;index<this.tableItemData.length ;index++){
                let ed = this.tableItemData[index];
                dicDadas.push({"label":ed.columnName,"value":ed.prop})
              }
              this.rightsOption.column[3].dicData = dicDadas;
              this.rightsOption.column[5].dicData = dicDadas;
              this.rightsOption.column[6].dicData = dicDadas;
              //this.rightsOption.column[0].dicData = dicDadas;

              let obj = {};
              obj.entity = {};
              obj.entity.appId = this.appId;
              listCore("/form/formQueryPermission", obj).then(response => {
                this.rightsTableData = response.data.data.data;
              });
            },

            handleRigthsSave (form, done, loading) {
                form.appId =  this.appId;
                saveCore("/form/formQueryPermission",form).then(() => {
                    this.$message.success("成功");
                    this.getFormRigths();
                    done();
                });

            },

            handleRigthsUpdate (form, index, done, loading) {
                saveCore("/form/formQueryPermission",form).then(() => {
                    this.$message.success("成功");
                    this.getFormRigths();
                    done();
                });
            },

            handleRigthsDel (form, index, done, loading) {
                this.$confirm("是否确认删除：" +form.name, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(function() {
                        return delCore("/form/formQueryOperate",row);
                    })
                    .then(() => {
                        this.getFormRigths();
                        this.$message.success("删除成功");
                    });
            },



            handleClick(tab, event) {

              //  this.$message.success(    tab.index);
                switch (tab.index*1) {
                    case 0:break;
                    case 1:  this.getFormEvents();break;
                    case 2:  this.getFormRigths();break;
                    case 3:  this.getCallParams;break;
                    case 4: break;
                }
                //console.log(tab, event);

            },
            //======字典项表格相关=====tableItemData
            getDictItemList(app) {
                this.tableSearchVisible = true;
                queryApp({"app":app}
                ).then(response => {
                    this.tableItemData = response.data.data.data;
                    // this.$nextTick(() => {
                    //     this.$refs.itemCrud.refreshTable();
                    //
                    // })
                });
            },
        }
    };
</script>
<style lang="scss">

</style>
